<!--  -->
<template>
    <div :class="[`li-menu-item--${mode}`, isActive && `li-menu-item--${mode}--active`]" @click="handleClick">
        <div :class="`li-menu-item--${mode}-icon`">
            <slot name="icon">
                <LiIcon :icon="icon" :size="iconSize" :color="isActive ? color : '#000000'"></LiIcon>
            </slot>
        </div>
        <div :class="`li-menu-item--${mode}-content`">
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, onMounted, computed, inject } from 'vue';

import LiIcon from '@/components/li-icon/li-icon.vue';

const props = defineProps({
    // 唯一标识
    name: {
        type: [String, Number],
        default: ''
    },
    icon: {
        type: String,
        default: ''
    },
    iconSize: {
        type: String,
        default: '28px'
    }
});

const emit = defineEmits(['update:activeName', 'doSomething']);

const modelValue = computed(() => inject<string | number>('activeName'));
const color = computed(() => inject<string>('color'));
const mode = computed(() => inject<string>('mode'));
const getActiveName = inject<string | number>('getActiveName');
const activeNameEvent = inject('activeNameEvent');

const getActiveNames = computed(() => getActiveName());

const isActive = computed(() => {
    return getActiveNames.value === props.name;
});

const handleClick = () => {
    emit('doSomething', props.name);
    activeNameEvent(props.name);
};
</script>

<style lang="less" scoped>
// 水平
.li-menu-item--horizontal {
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    height: 46px;
    cursor: pointer;
    &::before {
        content: ' ';
        position: absolute;
        bottom: 0px;
        left: 20px;
        height: 2px;
        width: calc(100% - 40px);
        background-color: rgba(0, 0, 0, 0);
    }

    &::before {
        content: ' ';
        position: absolute;
        bottom: 0px;
        left: 50%;
        height: 2px;
        width: 0px;
        background-color: @primary;
    }

    &:hover {
        // color: @primary;
        &::before {
            content: ' ';
            position: absolute;
            bottom: 0px;
            left: 20px;
            height: 2px;
            width: calc(100% - 40px);
            background-color: @primary;
        }
    }

    &--active {
        color: @primary;
        &::before {
            content: ' ';
            position: absolute;
            bottom: 0px;
            left: 20px;
            height: 2px;
            width: calc(100% - 40px);
            background-color: @primary;
        }
    }

    &-icon {
        margin-right: 10px;
    }
    &-content {
    }
}

// 竖直
.li-menu-item--inline {
    width: calc(100% - 40px);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    // flex-direction: row;
    align-items: center;
    padding: 0 20px;
    height: 46px;
    cursor: pointer;
}
</style>
